<template>
  <div class="app-container ">

    <!-- 数据显示区 -->
    <el-row class="select-table table-striped">
      <el-col :span="24">

        <el-table
            :data="treeData"
            style="width: 100%;margin-bottom: 20px;"
            row-key="deptId"
            border
            default-expand-all
            :tree-props="{children: 'children', hasChildren: 'hasChildren'}">


            <el-table-column   prop="deptName"   label="部门名称"  ></el-table-column>
            <el-table-column   prop="orderNum"   label="排序"  ></el-table-column>
            <el-table-column   prop="createTime"   label="创建时间"  ></el-table-column>

            <el-table-column label="操作" >
              <template slot-scope="scope">

                <el-button type="text" icon="el-icon-edit">编辑</el-button>
                <el-button v-if="scope.row.parentId===0" type="text" icon="el-icon-plus">添加子部门</el-button>

              </template>
            </el-table-column>

          </el-table>

      </el-col>
    </el-row>

  </div>
</template>

<script>
// 引用 数据访问层
import deptService from '@/service/deptService'
// vue规范，绝对不能乱写的
export default {
  // 1、初始化数据语法
  data() {
    return {
      treeData : []
    }
  },
  // 2、vue管理的方法
  methods: {

  },
  // 3、vue初始化以后自动执行方法
  created() {
    //初始化传递 data 对象
    deptService.init(this)
    // 调用部门数据访问层中的方法
    deptService.loadData()
  }

}

</script>
